import React from 'react';
import MonacoEditor from '../components/MonacoEditor';
import YamlPreview from '../components/YamlPreview';
import Toolbar from '../components/Toolbar';
import StatusBar from '../components/StatusBar';

const Editor: React.FC = () => {
  return (
    <div className="h-full flex flex-col">
      {/* 工具栏 */}
      <Toolbar className="flex-shrink-0" />
      
      {/* 主编辑区域 */}
      <div className="flex-1 flex min-h-0">
        {/* 编辑器 */}
        <div className="flex-1 min-w-0">
          <MonacoEditor className="h-full" />
        </div>
        
        {/* 预览区域 */}
        <div className="w-1/2 min-w-0 border-l border-gray-200 dark:border-gray-700">
          <YamlPreview className="h-full" />
        </div>
      </div>
      
      {/* 状态栏 */}
      <StatusBar className="flex-shrink-0" />
    </div>
  );
};

export default Editor;